<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SUOYUEの数据</title>

    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>

<!--导航-->
<nav class="gird-header">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui olive header item" style="font-family: STSong">SUOYUEのBLOG</h2>
            <a href="#" th:href="@{/}" class="m-item item m-mobile-hide"><i class="home icon"></i><span th:text="#{index.home}">首页</span></a>
            <a href="#" th:href="@{/types/-1}" class="m-item item m-mobile-hide"><i class="clone outline icon"></i><span th:text="#{index.type}">分类</span></a>
            <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide"><i class="clock icon"></i><span th:text="#{index.time}">时间轴</span></a>
            <a href="#" th:href="@{/message}" class="m-item item m-mobile-hide"><i class="book icon"></i><span th:text="#{index.messages}">留言板</span></a>
            <a href="#" th:href="@{/echarts}" class="active m-item item m-mobile-hide"><i class="table icon"></i><span th:text="#{index.echarts}">数据统计</span></a>
            <a href="#" th:href="@{/friends}" class="m-item item m-mobile-hide"><i class="pencil alternate icon"></i><span th:text="#{index.links}">友链</span></a>
            <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide"><i class="info icon"></i><span th:text="#{index.me}">关于我</span></a>
            <div class="right m-item item m-mobile-hide">
                <form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
                    <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
                        <input style="color: white" type="text" name="query" placeholder="Search....">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--手机端收起导航栏-->
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--顶部图片-->
<div class="m-bg-type_outer" style="width: 100%;height: 40%">
    <img src="../static/images/databg.jpg" th:src="@{/images/databg.jpg}" alt="" class="ui m-bg image" style="width: 100%;height: 100%">
    <div class="m-bg-class_cover">
        <div class="ui container" style="position: relative ;bottom: -540px;">
            <div class="m-font-size-title m-right-bottom" align="center" style="font-family:'STXingkai'">数据统计</div>
            <div class="m-font-size-text-init-title m-margin-top" align="center">若真若幻，惜情惜义。若你微笑，自得繁花。若许一世，为何负情。</div>
        </div>
    </div>
</div>

<!--中间内容-->
<div id="waypoint" class="m-margin- animated fadeIn">
    <div class="ui container">
        <!-- 标签信息 -->
        <div class="ui segment m-padded-tb-large m-opacity">

            <div class="ui container box-shadow-max m-opacity-tiny" align="center">
                <div class="ui big labeled button m-margin-all" th:each="item,userStat: ${blogTotalMap}">
                    <a class="ui olive right pointing label" th:text="${userStat.current.key}">文章数</a>
                    <a class="ui green left pointing label" th:text="${userStat.current.value}">24</a>
                </div>
            </div>

            <div class="ui padded segment m-padded-tb-large m-opacity" align="center">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div class="ui container">
                    <div id="echart" style="width: 92%;height: 520px;"></div>
                </div>

<!--                <div class="ui stackable grid">-->
<!--                    <div class="eight wide column">-->
<!--                        文章分类圆饼图-->
<!--                    </div>-->
<!--                    <div class="eight wide column">-->
<!--                        旭日图-->
<!--                    </div>-->
<!--                </div>-->
            </div>

        </div>
    </div>
</div>

<br>
<br>


<!--右下角-侧边栏-->
<div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
    <div class="ui vertical icon buttons ">
        <div id="toTop-button" class="ui icon button" ><i class="chevron up icon"></i></div>
    </div>
</div>

<!--底部栏-->
<footer class="ui inverted vertical segment m-padded-tb-massive m-opacity" th:replace="_fragments :: footer">
</footer>
<!--通用script：使用div标签或thymeleaf模板的th:block-->
<th:block th:replace="_fragments :: script">
</th:block>

<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<script src="../static/lib/echarts/echarts.min.js" th:src="@{/lib/echarts/echarts.min.js}"></script>

<!--雪花效果-->
<script src="http://www.lmlblog.com/winter/templets/xq/js/snowy.js"></script>
<script src="http://www.lmlblog.com/blog/12/js/Snow.js"></script>
<style type="text/css">
    .snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index: 100 !important;}
</style>
<div class="snow-container"><canvas width="100%" height="657"></canvas></div>

<!--看板娘-->
<!--<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
<!--看板娘-自定义-->
<div id="waifu" class="cartoon">
    <div id="waifu-tips" class="cartoonText">好久不见，日子过得好快呢……</div>
    <canvas id="live2d" width="800" height="800" class="cartoonCan"></canvas>
    <div id="waifu-tool">
        <span class="fa fa-lg fa-comment"></span>
        <span class="fa fa-lg fa-paper-plane"></span>
        <span class="fa fa-lg fa-user-circle"></span>
        <span class="fa fa-lg fa-street-view"></span>
        <span class="fa fa-lg fa-camera-retro"></span>
        <span class="fa fa-lg fa-info-circle"></span>
        <span class="fa fa-lg fa-times"></span>
    </div>
</div>

<script>

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    //右下角点击滚上去事件
    $('#toTop-button').click(function () {
        $(window).scrollTo(0,500);
    });
    //滚动侦测
    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function(direction) {
            if (direction == 'down') {
                $('#toolbar').show(100);
            } else {
                $('#toolbar').hide(500);
            }
            console.log('Scrolled to waypoint!  ' + direction);
        }
    })

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart'));
    // 指定图表的配置项和数据
    var option = {
        //设置线条颜色
        color: ['#80FFA5'],
        title: {
            text: '博文访问日增量',
            subtext: '最新一周的访问日增量数据'
        },
        tooltip: {
            //触发类型: item/axis/none
            trigger: 'axis',
            //显示横坐标
            // axisPointer: {
            //     type: 'cross',
            //     label: {
            //         backgroundColor: '#6a7985'
            //     }
            // }
        },
        legend: {
            //必须同名才能显示
            data: ['日增量']
        },
        //直角坐标系地板
        grid: {
            //是否显示网格
            show: true,
            //背景颜色
            // backgroundColor: 'teal',
            //图形颜色
            // borderColor: 'olive'
        },
        xAxis: {
            // 设置X/Y坐标重合，默认不重合
            boundaryGap: false,
            //传值-后台获取
            data: []
        },
        //指定type类型或为空默认自适应
        yAxis: {
           type: 'value'
        },
        series: [{
            //定位显示信息
            name: '日增量',
            type: 'line',
            smooth: true,
            //显示下方区域样式
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(128, 255, 165)'
                }, {
                    offset: 1,
                    color: 'rgba(1, 191, 236)'
                }])
            },
            //传值-后台获取
            data: []
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    //将服务器端返回的数据设置到图表上
    var fillToChart = function (viewEcharts) {
        var xDate = [];
        var yView = [];
        $.each(viewEcharts,function (index,viewEchart) {
            xDate.push(viewEchart.dateTime);
            yView.push(viewEchart.view);
        });
        myChart.setOption({
            xAxis: {
                data: xDate
            },
            yAxis: {},
            series: [{
                data: yView
            }]
        });
    };

    $(function(){
        //发送请求获取最新疫情数据
        $.get("/echarts/data", {}, function (resp) {
            fillToChart(resp.data);
        }, "json");
    })

</script>

</body>
</html>